<template>
  <div class="add_dialog">
    <el-dialog
      top="25vh"
      v-model="dialogVisible"
      :title="TipsType == 1 ? '选择老师' : TipsType == 2 ? '选择助教' : '选择班主任'"
      width="850px"
    >
      <div class="content">
        <div class="search-box">
          <div>
            <span>{{ TipsType == 3 ? '员工' : '教师' }}姓名</span>
            <span><el-input placeholder="请输入" v-model="searchName"></el-input></span>
          </div>
          <div>
            <span>{{ TipsType == 3 ? '员工' : '教师' }}电话</span>
            <span><el-input placeholder="请输入" v-model="searchPhone"></el-input></span>
          </div>
          <div><el-button type="primary">搜索</el-button></div>
          <div class="tips" v-if="TipsType == 1">
            <span>?</span>
            空条件搜索查询为全部老师
          </div>
        </div>
        <div class ="table">
          <div class="head">
            <div class="item h-item" v-for="(cloumn, index) in cloumns.filter(f=>!f.hide)" :key="index">
              {{ cloumn.lable }}
            </div>
          </div>
          <div class="table-list">
            <div class="list" v-for="(item, index) in tableData" :key="index">
              <div class="item" v-for="(cloumn, cIndex) in cloumns.filter(f=>!f.hide)" :key="cIndex">
                <span class="operate" v-if="cloumn.type == 'btn'" @click="selectTable(item)">【选择】</span>
                <div class="imgs" v-else-if="cloumn.type == 'img'">
                  <img src="https://cdn.xiaohe.com/jwb/img/sex_nv.png" alt="">
                </div>
                <div v-else>
                  {{ item[cloumn.prop] }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pagination">
          <div>显示第1到第{{ tableData.length }}条记录，总共{{ tableData.length }}记录</div>
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[5, 10, 20, 30, 40, 50]"
            :small="true"
            :background="true"
            :page-count="pageCount"
            layout="prev, pager, next, jumper, sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
  <div>{{ searchName }}</div>
</template>

<script setup>
import { ref, defineExpose, defineEmits } from "vue";
const dialogVisible = ref(false)
const TipsType = ref(1)
const searchName = ref("")
const searchPhone = ref("")

const cloumns = [
  {lable: "操作", prop:"", type: "btn", hide: false},
  {lable: "教师姓名", prop:"name", type: "text", hide: false},
  {lable: "照片", prop:"photograph", type: "img", hide: false},
  {lable: "手机号码", prop:"phone", type: "text", hide: false}
]
const tableData = [
  {name: "张三", photograph: "", phone: "13609877890"},
  {name: "李四", photograph: "", phone: "13609877890"},
  {name: "王小", photograph: "", phone: "13609877890"}
]

const currentPage = ref(1)
const pageSize = ref(10)
const pageCount = ref(1)

const handleSizeChange = (val) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val) => {
  console.log(`current page: ${val}`)
}

const getTableList = (type) =>{
  TipsType.value = type
  if (type == 3) {
    cloumns[1].lable = "员工姓名"
    cloumns[2].hide = true
  }else{
    cloumns[1].lable = "教师姓名"
    cloumns[2].hide = false
  }
  dialogVisible.value = true
}

const selectTable= (item) => {
  emit("saveTeacher", item, TipsType.value)
  dialogVisible.value = false
}

const emit = defineEmits(['saveTeacher'])

defineExpose({
  getTableList
})

</script>

<style lang="scss" scoped>
.add_dialog {
  ::v-deep .el-dialog__body {
    border-top: 1px solid #cfcfcf;
    padding: 10px 20px 30px;
  }
  .content {
    .search-box {
      display: flex;
      align-items: center;
      &>div {
        display: flex;
        align-items: center;
        margin-right: 15px;
        &>span {
          margin-right: 10px;
        }
      }
      ::v-deep .el-input__wrapper {
        width: 150px;
      }
      .tips {
        &>span{
          width: 18px;
          height: 18px;
          line-height: 18px;
          border-radius: 50%;
          background-color: #3faae2;
          color: #fff;
          text-align: center;
        }
      }
    }

    .table {
      border-left: 1px solid #cecece;
      border-top: 1px solid #cecece;
      margin-top: 15px;
      .head, .list {
        display: flex;
        align-items: center;
        .item {
          border-right: 1px solid #cecece;
          border-bottom: 1px solid #cecece;
          flex: 1;
          height: 51px;
          padding: 5px 0;
          text-align: center;
          line-height: 51px;

          .operate {
            color: #3faae2;
            cursor: pointer;
          }
          .imgs {
            img {
              width: 32px;
              height: 40px;
            }
          }
        }

        .h-item {
          background-color: #e7e7e7;
          text-align: center;
          height: 41px;
          line-height: 41px;
        }
      }
    }

    .pagination {
      &>div:first-child {
        padding: 15px 0;
      }
    }
  
  }
}
</style>